<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-07 15:51:54
 * @LastEditors: xuzehan 935351619@qq.com
 * @LastEditTime: 2024-05-28 14:41:38
 * @FilePath: \ant-design-vue-jeecg-master\src\views\user\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="containers">
    <device-status-box v-if="false" />
    <!--    <div class="viewer" ref="aff">-->
    <!--      <vc-viewer @ready="ready" :info-box="false" :logo="false">-->
    <!--        <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="10">-->
    <!--          <vc-provider-imagery-urltemplate-->
    <!--            :projection-transforms="projectionTransforms"-->
    <!--            :url="urlProvider"-->
    <!--          ></vc-provider-imagery-urltemplate>-->
    <!--        </vc-layer-imagery>-->
    <!--        &lt;!&ndash; <vc-layer-imagery ref="layerText" :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="20">-->
    <!--          <vc-provider-imagery-tianditu-->
    <!--            map-style="cva_c"-->
    <!--            token="436ce7e50d27eede2f2929307e6b33c0"-->
    <!--          ></vc-provider-imagery-tianditu>-->
    <!--        </vc-layer-imagery> &ndash;&gt;-->
    <!--        &lt;!&ndash; <vc-layer-imagery-->
    <!--          :alpha="alpha"-->
    <!--          :brightness="brightness"-->
    <!--          :contrast="contrast"-->
    <!--          :sort-order="10"-->
    <!--        >-->
    <!--          <vc-provider-imagery-tianditu-->
    <!--            :map-style="mapStyle"-->
    <!--            token="436ce7e50d27eede2f2929307e6b33c0"-->
    <!--          ></vc-provider-imagery-tianditu>-->
    <!--        </vc-layer-imagery>&ndash;&gt;-->
    <!--      </vc-viewer>-->

    <!--      &lt;!&ndash; </a-modal> &ndash;&gt;-->
    <!--    </div>-->
    <div class='InfoDiv'>
      <ZKCZT class="ZKCZT" ref="ZKCZT" @changeCar="changeCar" />
      <div class="divBody">
        <div class='leftDiv'>

          <antennaStatus class="antennaStatus" ref="antennaStatus" @changeCar="changeCar" />
          <BUCstatus class="BUCstatus" ref="BUCstatus" @changeCar="changeCar" />
          <LNBstatus class="LNBstatus" ref="LNBstatus" @changeCar="changeCar" />
          <baseStatus class="baseStatus" ref="baseStatus" @changeCar="changeCar" />
          <!-- <LNBstatus class="LNBstatus windowInfo" ref="LNBstatus" style="overflow-y: scroll;overflow-x: hidden;" /> -->

        </div>
        <div class="rightDiv">
          <!-- <div style="width:100%;display:flex;justify-content: space-between;margin-bottom: 5px;overflow: scroll">
            <BUCstatus class="BUCstatus" ref="BUCstatus" />
            <baseStatus class="baseStatus" ref="baseStatus" />
          </div> -->
          <TCPchannal ref='TCPchannal' class="TCPchannal" />
          <DDWZXX class='DDWZXX' ref='DDWZXX' />
          <JHXXZT class="JHXXZT" ref='JHXXZT' />

        </div>
      </div>

    </div>
    <!-- <LLZT class="LLZT" ref="LLZT" /> -->
  </div>
</template>

<script>
import '@/assets/less/dashborder.less'
import ZKCZT from './modules/ZKCZT.vue'
import antennaStatus from './modules/antennaStatus.vue'
import BUCstatus from './modules/BUCstatus.vue'
import baseStatus from './modules/baseStatus.vue'
import JHXXZT from './modules/JHXXZT.vue'
import LNBstatus from './modules/LNBstatus.vue'
import DDWZXX from './modules/DDWZXX';
import TCPchannal from './modules/TCPchannal.vue'
import DeviceStatus from '../networkStatus/modules/deviceStatus.vue'
import deviceStatusBox from '@/views/deviceStatus/index.vue'
export default {
  components: {
    ZKCZT,
    antennaStatus,
    BUCstatus,
    LNBstatus,
    baseStatus,
    JHXXZT,
    DDWZXX,
    deviceStatusBox,
    TCPchannal,
    DeviceStatus
  },
  data() {
    return {
      urlProvider: '/maps/{z}/{x}/{y}.png', //离线地图地址
      // urlProvider: 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
      visible: true,
      data: [],
      cesiumInstance: null,
      curInfo: {},
      mapStyle: 'img',
      alpha: 1,
      brightness: 1,
      contrast: 1,
      start: null,
      stop: null,
      projectionTransforms: {
        form: 'BD09',
        to: 'WGS84',
      },
      camera: {
        position: { lng: 109, lat: 34, height: 2000 },
        heading: 6.259802922203329,
        pitch: -1.5382656190477708,
        roll: 0,
      },
    }
  },
  watch: {
    // $route: {
    //   handler(val) {
    //     console.log(val)
    //     if (val.name == 'situationDisplay') {
    //       location.replace(location)
    //     }
    //   },
    //   deep: true,
    //   // immediate: true
    // },
  },

  mounted() {
    !(function (t) {
      function e() {
        var e = this || self
          ; (e.globalThis = e), delete t.prototype._T_
      }
      'object' != typeof globalThis &&
        (this
          ? e()
          : (t.defineProperty(t.prototype, '_T_', {
            configurable: !0,
            get: e,
          }),
            _T_))
    })(Object)
    // this.initEntity()
  },
  methods: {
    changeCar(val) {
      this.$refs.LLZT.edit(val)
    },
    getRefsAff() {
      return this.$refs.aff
    },
    ready(cesiumInstance) {
      const { Cesium, viewer } = cesiumInstance
      this.cesiumInstance = cesiumInstance
      viewer._cesiumWidget._creditContainer.style.display = 'none'
      let _this = this
      // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(80, 22, 130, 55) // 默认定位到中国上空，home定位到中国范围
      viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(104.39, 34.9, 19000000) })
      let scene = viewer.scene
      var handler3D = new Cesium.ScreenSpaceEventHandler(scene.canvas)
      viewer.imageryProvider = new Cesium.UrlTemplateImageryProvider({
        url: 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
      })
      // handler3D.setInputAction(function (movement) {
      //   var pick = scene.pick(movement.position)

      //   if (pick && pick.id) {
      //     console.log(pick.id.id, '-*-*-')
      //     _this.$router.push({
      //       name: 'baseStationChannel-baseStationInfo',
      //     })
      //   }
      // }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

      //抗锯齿
      viewer.scene.fxaa = true
      //需要纯色背景必须设置
      setTimeout(() => {
        this.initEntity()
      }, 500)
    },
    initEntity() {
      this.data = [
        {
          type: 'star',
          lng: 105.0744619,
          lat: 44.0503706,
          hei: 5000000,
          name: '卫星1',
        },
        {
          type: 'station',
          lng: 116.147522,
          lat: 39.81773,
          hei: 0,
          name: '云岗站',
        },
        {
          type: 'car',
          lng: 103.0744619,
          lat: 42.0503706,
          hei: 0,
          name: '指控车1',
          status: 1,
          children: [
            {
              label: '导弹1',
              status: 1,
            },
            {
              label: '导弹2',
              status: 1,
            },
            {
              label: '导弹3',
              status: 2,
            },
            {
              label: '导弹4',
              status: 0,
            },
          ],
        },
        {
          type: 'car',
          lng: 113.0744619,
          lat: 32.0503706,
          hei: 0,
          name: '指控车2',
          status: 1,
          children: [
            {
              label: '导弹1',
              status: 1,
            },
            {
              label: '导弹2',
              status: 0,
            },
            {
              label: '导弹3',
              status: 0,
            },
            {
              label: '导弹4',
              status: 1,
            },
          ],
        },
        {
          type: 'car',
          lng: 103.0744619,
          lat: 32.0503706,
          hei: 0,
          name: '指控车3',
          status: 0,
          children: [
            {
              label: '导弹1',
              status: 0,
            },
            {
              label: '导弹2',
              status: 1,
            },
            {
              label: '导弹3',
              status: 1,
            },
            {
              label: '导弹4',
              status: 1,
            },
          ],
        },
        {
          type: 'car',
          lng: 93.0744619,
          lat: 40.0503706,
          hei: 0,
          name: '指控车4',
          status: 1,
          children: [
            {
              label: '导弹1',
              status: 1,
            },
            {
              label: '导弹2',
              status: 2,
            },
            {
              label: '导弹3',
              status: 1,
            },
          ],
        },
      ]
      let star = this.data.find((item) => item.type == 'star')
      console.log(star, 'star')
      this.data.forEach((item) => {
        if (item.type == 'station') {
          this.addpoint(item.lng, item.lat, item.name, 0)
          this.drawLine(star.lng, star.lat, star.hei, item.lng, item.lat)
        }
        if (item.type == 'star') {
          this.draw()
          // this.draw(item.lng, item.lat, item.name, 0)
        }
        if (item.type == 'car') {
          this.addCar(item.lng, item.lat, item.children)
          if (item.status == 1) {
            this.addCar(item.lng, item.lat, item.children, star)
            // this.drawLine(star.lng, star.lat, star.hei, item.lng, item.lat, 0)
          }
        }
      })
    },
    addpoint(lng, lat, name, status) {
      // 地面站
      const { Cesium, viewer } = this.cesiumInstance
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        // id: '飞机1', //id唯一
        billboard: {
          image: '../../../model/station2.png',
          // image: this.img,
          disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
          scale: 3,
          width: 15,
          height: 15,
          // pixelOffset: new Cesium.Cartesian2(0, -8), //偏移量
        },
        label: {
          //文字标签
          text: name,
          font: '500 30px Helvetica', // 15pt monospace
          scale: 0.5,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.BLACK,
          pixelOffset: new Cesium.Cartesian2(0, 30), //偏移量
          showBackground: true,
          backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0), //背景顔色
        },
      })
    },
    addCar(lng, lat, children, star) {
      //车和导弹
      const { Cesium, viewer } = this.cesiumInstance
      var position = Cesium.Cartesian3.fromDegrees(lng, lat, 0)
      var heading = Cesium.Math.toRadians(135)
      var pitch = 0
      var roll = 0
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

      var entity = viewer.entities.add({
        name: 'GroundVehicle',
        position: position,
        orientation: orientation,
        model: {
          uri: '../../../model/GroundVehicle.glb',
          minimumPixelSize: 128,
          maximumScale: 70000,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20, 20000000),
        },
        // polyline: {
        //   show: star,
        //   positions: Cesium.Cartesian3.fromDegreesArrayHeights([star.lng, star.lat, star.hei, lng, lat, 0]),
        //   width: 1,
        //   arcType: Cesium.ArcType.NONE,
        //   material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.GREEN),
        //   distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20, 20000000),
        // },
      })
      if (star) {
        viewer.entities.add({
          name: 'GroundLine',
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([star.lng, star.lat, star.hei, lng, lat, 0]),
            width: 1,
            // arcType: Cesium.ArcType.NONE,
            // material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.GREEN),
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20, 20000000),
            material: new Cesium.PolylineOutlineMaterialProperty({
              color: Cesium.Color.LAWNGREEN,
              outlineWidth: 1,
              outlineColor: Cesium.Color.LAWNGREEN,
            }),
          },
        })
      }
      if (children) {
        let num = 17
        children.forEach((i) => {
          num = num - 7
          var entity = viewer.entities.add({
            name: 'GroundVehicle',
            position: position,
            orientation: orientation,
            billboard: {
              id: 122,
              image: i.status == 1 ? '../../../model/L.png' : '../../../model/R.png',
              // image: this.img,
              disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
              scale: 3,
              width: 8,
              height: 8,
              pixelOffset: new Cesium.Cartesian2(num, -8), //偏移量
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20, 20000000),
            },
          })
        })
      }
      // if (star) {
      //   const { lng: startLng, lat: startLat, hei: startHei } = star
      //   console.log(lng, 'startLng---')
      //   const { Cesium, viewer } = this.cesiumInstance
      //   const czml = [
      //     {
      //       id: 'document',
      //       name: 'CZML Geometries: Polyline',
      //       version: '1.0',
      //       distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20, 20000000),
      //     },

      //     {
      //       id: 'dashedLine',
      //       name: 'Blue dashed line',

      //       distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20, 20000000),
      //       polyline: {
      //         positions: {
      //           cartographicDegrees: [startLng, startLat, startHei, lng, lat, 0],
      //           // cartographicDegrees: [105.0744619, 44.0503706, 5000000, 116.147522, 39.81773, 0],
      //         },
      //         material: {
      //           solidColor: {
      //             color: {
      //               rgba: [0, 255, 2, 255],
      //             },
      //           },
      //         },
      //         width: 1,
      //       },
      //     },
      //   ]

      //   // const viewer = new Cesium.Viewer('cesiumContainer')
      //   const dataSourcePromise = Cesium.CzmlDataSource.load(czml)
      //   viewer.dataSources.add(dataSourcePromise)
      // }
    },

    draw() {
      // 卫星
      const { Cesium, viewer } = this.cesiumInstance
      const that = this
      // var positionArr = new Cesium.SampledPositionProperty() // 这才是做重要的
      // var lon = 105.0744619 //Math.floor(Math.random() * 360)
      // var lat = 44.0503706 //Math.floor(Math.random() * 360)
      // var hei = 5000000 //1299999 + Math.random() * 1500000
      // for (let k = lat; k <= 360 + lat; k += 30) {
      //   let obj = {
      //     lon: lon,
      //     lat: k,
      //     time: k - lat,
      //     hei: hei,
      //   }
      //   var time = Cesium.JulianDate.addSeconds(this.start, obj.time, new Cesium.JulianDate())
      //   // 经纬度转换为世界坐标
      //   var position1 = Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, obj.hei)
      //   // console.log(position, 'position');

      //   positionArr.addSample(time, position1)
      //   // positionArr.push(property)
      // }
      var position = Cesium.Cartesian3.fromDegrees(105.0744619, 44.0503706, 5000000)
      var heading = Cesium.Math.toRadians(135)
      var pitch = 0
      var roll = 0
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
      var entity = viewer.entities.add({
        name: 'weixing ',
        position: position,
        orientation: orientation,
        model: {
          uri: '../../../model/weixin.gltf',
          minimumPixelSize: 128,
          maximumScale: 29000,
        },
      })
      // viewer.entities.add({
      //   availability: new Cesium.TimeIntervalCollection([
      //     new Cesium.TimeInterval({
      //       start: this.start,
      //       stop: this.stop,
      //     }),
      //   ]),
      //   orientation: new Cesium.VelocityOrientationProperty(positionArr),
      //   position: positionArr,
      //   path: {
      //     trailTime: Infinity,
      //     resolution: 1,
      //     // material: Cesium.Color.fromRandom({}),//随机颜色
      //     // material: new Cesium.PolylineGlowMaterialProperty({
      //     //   glowPower: 0.1,
      //     //   // color: Cesium.Color.fromRandom({}),
      //     //   color: Cesium.Color.BULE,
      //     // }),
      //     material: new Cesium.ImageMaterialProperty({
      //       transparent: true, //设置透明
      //       image: that.getColorRamp({
      //         0.0: rgba.withAlpha(1.0).toCssColorString().replace(')', ',1.0)'),
      //         0.045: rgba.withAlpha(0.8).toCssColorString(),
      //         0.1: rgba.withAlpha(0.6).toCssColorString(),
      //         0.15: rgba.withAlpha(0.4).toCssColorString(),
      //         0.37: rgba.withAlpha(0.2).toCssColorString(),
      //         0.54: rgba.withAlpha(0.1).toCssColorString(),
      //         1.0: rgba.withAlpha(0).toCssColorString(),
      //       }), //Canvas
      //     }),
      //     width: 11,
      //   },
      // })
    },

    // 通信线
    drawLine(startLng, startLat, startHei, endLng, endLat, type) {
      let color
      if (type == 0) {
        color = 'green'
      }
      const { Cesium, viewer } = this.cesiumInstance
      const czml = [
        {
          id: 'document',
          name: 'CZML Geometries: Polyline',
          version: '1.0',
        },

        {
          id: 'dashedLine',
          name: 'Blue dashed line',
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20, 20000000),
          polyline: {
            positions: {
              cartographicDegrees: [startLng, startLat, startHei, endLng, endLat, 0],
              // cartographicDegrees: [105.0744619, 44.0503706, 5000000, 116.147522, 39.81773, 0],
            },
            material: {
              solidColor: {
                color: color
                  ? {
                    rgba: [0, 255, 2, 255],
                  }
                  : {
                    rgba: [0, 255, 255, 255],
                  },
              },
            },
            width: 1,
          },
        },
      ]

      // const viewer = new Cesium.Viewer('cesiumContainer')
      const dataSourcePromise = Cesium.CzmlDataSource.load(czml)
      viewer.dataSources.add(dataSourcePromise)
    },
    getColorRamp(val) {
      if (val == null) {
        val = {
          0.0: 'blue',
          0.1: 'cyan',
          0.37: 'lime',
          0.54: 'yellow',
          1: 'red',
        }
      }
      var ramp = document.createElement('canvas')
      ramp.width = 1
      ramp.height = 100
      var ctx = ramp.getContext('2d')
      var grd = ctx.createLinearGradient(0, 0, 0, 100)
      for (var key in val) {
        grd.addColorStop(1 - Number(key), val[key])
      }
      ctx.fillStyle = grd
      ctx.fillRect(0, 0, 1, 100)
      return ramp
    },
  },
}
</script>
<style>
.containers .ant-table .ant-table-thead tr th {
  background: transparent !important;
}
</style>
<style lang="less" scoped>
.containers {
  position: relative;
  height: calc(100vh - 100px);
  // overflow-y: scroll;

  // border: 1px solid green;
  .InfoDiv {
    display: flex;
    flex-direction: column;
    height: calc(100%);

    .ZKCZT {
      width: 100%;
      height: 150px;
      margin-bottom: 5px;
    }

    .divBody {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      // align-items: center;
      width: 100%;
      height: calc(100% - 150px);
      // border: 1px solid red;

      // border: 1px solid pink;
      .rightDiv {
        display: flex;
        // height: 100%;
        width: 37%;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .TCPchannal,
        .DDWZXX,
        .JHXXZT {
          width: 100%;
          min-height: 100px;
          overflow-y: auto;
          overflow-x: hidden;

        }

        .TCPchannal {
          // : 5px;
          height: 29%;
          // overflow-x: hidden;
        }

        .DDWZXX {
          // width: 100%;
          margin-bottom: 5px;
          height: 34%;
          // min-height: 220px;
          // overflow: scroll;
          // overflow-x: hidden;
        }

        .JHXXZT {
          height: 35%;
          // width: 100%;
          // overflow-y: scroll;
          // overflow-x: hidden;
          min-height: 200px
        }
      }

      .leftDiv {
        width: 62%;
        height: 100%;
        // border: 2px solid pink;
        // margin-right: 15px;

        // flex: 1;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .antennaStatus,
        .BUCstatus,
        .LNBstatus {
          width: 100%;
          margin-bottom: 2px;
          height: 23%;
          overflow: auto;
        }

        .baseStatus {
          width: 100%;
          // height: 32%;
          overflow: auto;
        }

        // .LNBstatus {
        //   margin-top: 10px;
        //   height: calc(100% - 290px);
        //   // border: 1px solid #58d0f3 ;
        //   // border :1px solid pink
        // }
      }
    }


  }
}

// .ZKCZT {
//   position: absolute;
//   // width: 400px;
//   // min-width: 370px;
//   top: 0px;
//   left: 0px;
//   // background: #64a4ecfb !important;
//   // color: #2f7cc4 !important;
// }
// .JHXXZT{
//   max-width: 450px;
//   position: absolute;
//   bottom: 0px;
//   left: 50%;
//    transform: translate(-120px,0px);
//   // right: 50%;
//   // height: 330px;

//   margin: auto;
// }
// .LLZT {
//   position: absolute;
//   // width: 35%;
//   bottom: 0px;
//   right: 0px;
// }
// .LNBstatus {
//   position: absolute;
//   max-width: 520px;
//   bottom: 0px;
//   left: 0px;
// }
// .BUCstatus {
//   position: absolute;
//   width: 330px;
//   top: 0px;
//   right: 0px;
//   margin: 0 auto;
// }
// .baseStatus{
//  position: absolute;
//  width: 330px;
//  top: 50px;
//  right: 0px;
//   // right: 50%;
//   // left: 40%;
//   // margin: 0 auto;
// }
.WPZ,
.WJL,
.JL,
.DX {
  display: inline-block;
  width: 15px;
  margin: auto;
  height: 15px;
  border-radius: 50%;
  margin-right: 5px;
}

.WPZ {
  background: red;
}

.WJL {
  background: rgb(230, 215, 19);
}

.JL {
  background: rgb(80, 226, 60);
}

.DX {
  background: rgb(119, 118, 118);
}

.keyBox {
  background: rgb(252, 249, 249);
  position: absolute;
  left: 45%;
  // right: 50%;
  margin: auto;
  top: 15px;
  // width: 150px;
  line-height: 32px;
  color: #000;
  height: auto;
  // border: 1px solid red;
  display: flex;
  // flex-direction: column;
  border-radius: 15px;
  padding: 5px;

  div {
    padding: 0 2px;
  }
}

.cesium-widget-credits {
  display: none !important;

  visibility: hide !important;
}

.viewer {
  width: 100%;
  height: calc(100vh - 150px);
  margin: auto;
  /* position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; */
}
</style>
